<template>
  <div class="container">
    <!-- <i class="fa fa-compass"></i> -->
    <header ref="header_ref">
      <div class="locationImg">
        <div class="fa fa-map-marker" aria-hidden="true">
          <!-- <div class="icon-location"></div> -->
        </div>
      </div>

      <div class="location-text" @click="indexToAddressInfo()">
        {{ city }}<i class="fa fa-caret-down"></i>
      </div>
    </header>
    <div class="search" ref="search">
      <div class="search-box">
        <div class="search-box-select">
          <i class="fa fa-search" style="margin-right: 1vw"></i
          >搜索饿了么商家、商店名称
        </div>
      </div>
    </div>
    <div class="food_div">
      <ul class="foodType">
        <li v-for="item in foodTypeList" :key="item.id">
          <img :src="item.typeImge" @click="indexToBusinessList(item.id)" />
          <p>{{ item.typeName }}</p>
        </li>
      </ul>
    </div>

    <div class="banner">
      <div class="banner-box">
        <h3>品质套餐</h3>
        <p>搭配齐全吃得好</p>
        <a>立即抢购 &gt;</a>
      </div>
    </div>

    <div class="superUser">
      <div class="left">
        <img src="/img/dcfl01.png" />
        <span>超级会员</span>
        · 每月享超值权益
      </div>
      <div class="right">
        <a>立即开通 ></a>
      </div>
    </div>

    <div class="box">
      <div class="lineleft"></div>
      <p>推荐商家</p>
      <div class="lineright"></div>
    </div>

    <div class="recommentType">
      <li>
        "综合排序"
        <i class="fa fa-caret-down"></i>
      </li>
      <li>距离最近</li>
      <li>销量最高</li>
      <li>
        筛选
        <i class="fa fa-caret-down"></i>
      </li>
    </div>

    <ul class="businessList">
      <li v-for="item in hotBusinessList" :key="item.id">
        <img :src="item.businessImg" />
        <div class="businessList-li-title">
          <div class="businessName">
            <h3 v-text="item.businessName"></h3>
            <div class="mark">·</div>
          </div>
          <div class="businessDelivery">
            <div class="business-info-star-left">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <p>4.9 月售345单</p>
            </div>
            <div class="business-info-star-right">蜂鸟专送</div>
          </div>
          <div class="price">
            <p>￥{{ item.startPrice }}起送 | ￥{{ item.psPrice }}配送</p>
            <p>3.23km | 30分钟</p>
          </div>
          <div class="explain">
            <div class="foodExplain">各种饺子</div>
          </div>
          <div class="userSub">
            <div class="left">
              <div class="mark">新</div>
              <div class="newUserExplain">新用户首单立减九元</div>
            </div>
            <div class="right">
              "2个活动"
              <i class="fa fa-caret-down"></i>
            </div>
          </div>
          <div class="discounts">
            <div class="mark">新</div>
            <div class="newUserExplain">特价商品五元器</div>
          </div>
        </div>
      </li>
    </ul>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";

export default {
  data() {
    return {
      typeId: this.$route.query.typeId,
      foodTypeList: [],
      hotBusinessList: [],
      city: "柳州市",
    };
  },
  mounted() {
    // 在这里获取传递的地址参数并更新div标签的文本内容
    const address = this.$route.query.address; // 从路由参数中获取地址
    if (address) {
      this.city = address; // 更新数据属性
    }
    document.onscroll = () => {
      let s1 = document.documentElement.scrollTop;
      let s2 = document.body.scrollTop;
      let scroll = s1 == 0 ? s2 : s1;
      //获取header的高度：视口宽度*0.12
      let width = document.documentElement.clientWidth;
      let search = this.$refs.search;
      if (scroll > width * 0.12) {
        search.style.position = "fixed";
        search.style.left = "0";
        search.style.top = "0";
      } else {
        search.style.position = "static";
      }
    };
    (this.foodTypeList = [
      { id: 1, typeImge: "img/dcfl01.png", typeName: "美食" },
      { id: 2, typeImge: "img/dcfl02.png", typeName: "美食" },
      { id: 3, typeImge: "img/dcfl03.png", typeName: "美食" },
      { id: 4, typeImge: "img/dcfl04.png", typeName: "美食" },
      { id: 5, typeImge: "img/dcfl05.png", typeName: "美食" },
      { id: 6, typeImge: "img/dcfl06.png", typeName: "美食" },
      { id: 7, typeImge: "img/dcfl07.png", typeName: "美食" },
      { id: 8, typeImge: "img/dcfl08.png", typeName: "美食" },
      { id: 9, typeImge: "img/dcfl09.png", typeName: "美食" },
      { id: 10, typeImge: "img/dcfl10.png", typeName: "美食" },
    ]),
      (this.hotBusinessList = [
        {
          id: 1,
          businessImg: "/img/dcfl01.png",
          businessName: "麦当劳",
          startPrice: 20,
          psPrice: 2,
        },
        {
          id: 2,
          businessImg: "/img/dcfl02.png",
          businessName: "华莱士",
          startPrice: 30,
          psPrice: 1,
        },
        {
          id: 3,
          businessImg: "/img/dcfl03.png",
          businessName: "塔斯订",
          startPrice: 50,
          psPrice: 5,
        },
      ]);
  },

  methods: {
    indexToBusinessList(id) {
      this.$router.push({ path: "/businessList", query: { typeId: id } });
    },

    indexToAddressInfo() {
      this.$router.push("/addressInfo");
    },
  },

  components: {
    Footer,
  },
};
</script>

<style scoped>

.container{
    width: 100%;
    padding-bottom: 14vw;
}


.container header{
    width: 100%;
    background-color: #0097FF;
    height: 12vw;
    color: white;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    font-size: 3.4vw;
}

.container .locationImg {
  margin: 0 3vw;
}

/* search部分 */
.container .search{
    width: 100%;
    background-color: #0097FF;
    height: 12vw;
    color: gray;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
}

.container .search .search-box {
  background-color: white;
  width: 80%;
  border-radius: 5px;
  /* 以下两行代码，可以实现字体居中 */
  height: 8vw;
  line-height: 8vw;
}

/* .container .search .search-box .search-box-select{
    margin: 0 auto;
    width: 70%;
} */

.container .search .search-box .search-box-select {
  margin-left: 10vw;
  width: 70%;
  font-size: 3.4vw;
}

/* =======================美食分类=============== */

.food_div {
  width: 100%;
  height: 48vw;
}

.foodType {
  width: 90%;
  height: 48vw;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-around;
  align-content: center;
}

.foodType li {
  width: 18vw;
  height: 20vw;
  display: flex;
  /* 设置主轴 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.foodType img {
  width: 12vw;
  height: 10vw;
}

.foodType p {
  font-size: 3.5vw;
}

/* =======================广告=============== */
.banner {
  width: 95%;
  height: 30vw;
  margin: 0 auto;
  background-image: url(../assets/index_banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;
}

.banner .banner-box {
  width: 50%;
  position: absolute;
  top: 2vw;
  left: 5vw;
}

.banner .banner-box h3 {
  font-size: 4.2vw;
  margin-bottom: 1.2vw;
}

.banner .banner-box p {
  font-size: 3.6vw;
  margin-bottom: 2.4vw;
  color: #666;
}

.banner .banner-box a {
  font-size: 3vw;
  font-weight: 700;
  color: #c79060;
}

/* =============会员============= */
.superUser {
  width: 95%;
  height: 11.5vw;
  margin: 0 auto;
  background: #feedc1;
  display: flex;
  margin-top: 2vw;
}

.superUser .left {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: left;
  font-size: 3vw;
}

.superUser .left img {
  width: 10vw;
  height: 10vw;
  margin-right: 2vw;
  margin-left: 5vw;
}

.superUser .left span {
  font-size: 4vw;
  margin-right: 2vw;
  font-weight: 700;
}

.superUser .right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.superUser .right a {
  margin-right: 4vw;
  font-size: 3vw;
  cursor: pointer;
}

/* ================推荐商家============== */
.box {
  width: 95%;
  height: 14vw;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box .lineleft {
  width: 7vw;
  height: 0.2vw;
  background-color: #888;
  margin-right: 5vw;
}

.box .lineright {
  width: 7vw;
  height: 0.2vw;
  background-color: #888;
  margin-left: 5vw;
}

.recommentType {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.recommentType li {
  list-style: none;
  font-size: 3.5vw;
  color: #555;
}

/* =================食品信息================= */
.businessList {
  width: 100%;
  margin-top: 6vw;
  padding-bottom: 10.5vw;
}

.businessList li {
  width: 95%;
  margin: 0 auto;
  display: flex;
  border-bottom: 0.1vw solid #666;
}

.businessList li img {
  width: 18vw;
  height: 18vw;
  margin-right: 3vw;
}

.businessList-li-title {
  width: 100%;
}

.businessList-li-title .businessName {
  display: flex;
  align-items: center;
  justify-content: left;
}

.businessList-li-title .businessName h3 {
  flex: 1;
  font-size: 4vw;
  color: #333;
}

.businessList-li-title .businessName .mark {
  font-size: 4vw;
  font-weight: 700;
  width: 2vw;
  height: 4vw;
  background-color: #666;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5vw;
}

.businessList-li-title .businessDelivery {
  display: flex;
}

.businessList-li-title .businessDelivery .business-info-star-left {
  display: flex;
  justify-content: left;
  align-items: center;
  flex: 1;
}

.businessList-li-title .businessDelivery .business-info-star-right {
  color: #ffff;
  font-size: 3vw;
  background: #0097ff;
  padding: 0 2vw;
}

.businessList-li-title .businessDelivery .business-info-star-left i {
  color: #fec80e;
  font-size: 3vw;
}
.businessList-li-title .businessDelivery .business-info-star-left p {
  color: #666;
  font-size: 3vw;
  color: #666;
  margin-left: 1vw;
}

.price {
  display: flex;
  font-size: 3.6vw;
  color: #666;
}
.price p:first-of-type {
  flex: 1;
  margin-left: 1vw;
}
.price p:last-of-type {
  margin-right: 3vw;
}

.explain {
  display: flex;
  font-size: 3.2vw;
}

.explain .foodExplain {
  display: flex;
  border: 0.1vw solid #666;
}

.userSub {
  display: flex;
}

.userSub .left {
  display: flex;
  flex: 1;
  justify-content: left;
  align-items: center;
}

.userSub .left .mark {
  width: 4vw;
  height: 4vw;
  margin-right: 2vw;
  background-color: #70bc46;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 0.2vw;
  font-size: 3vw;
}

.userSub .left .newUserExplain {
  font-size: 3vw;
}

.userSub .right {
  font-size: 2.5vw;
  color: #999;
  margin-right: 2vw;
}

.discounts {
  display: flex;
}

.discounts .mark {
  width: 4vw;
  height: 4vw;
  margin-right: 2vw;
  background-color: #70bc46;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 0.2vw;
  font-size: 3vw;
}

.discounts .newUserExplain {
  font-size: 3vw;
  margin-bottom: 2vw;
}
</style>
